<template>
  <div class="my-container">
    <el-row>
      <el-col :span="6">
        <ProjectCard class="project-card" :features="featureData"></ProjectCard>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('msg.profile.feature')" name="feature"
              ><Featrue :features="featureData"></Featrue
            ></el-tab-pane>
            <el-tab-pane :label="$t('msg.profile.chapter')" name="chapter"
              ><Chapter></Chapter
            ></el-tab-pane>
            <el-tab-pane :label="$t('msg.profile.author')" name="author"
              ><Author></Author
            ></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ProjectCard from './components/ProjectCard'
import Featrue from './components/Featrue'
import Chapter from './components/Chapter'
import Author from './components/Author'
import { feature } from '@/api/user'
import { watchSwitchLang } from '@/utils/i18n'

const activeName = ref('feature')

const featureData = ref([])
const getFeatureData = async () => {
  featureData.value = await feature()
  console.log(featureData.value)
}
getFeatureData()

watchSwitchLang(getFeatureData)
</script>

<style lang="scss" scoped>
.project-card {
  margin-right: 20px;
}
</style>
